// 滑块验证模型
import { getPicture, reqCheck } from '@/services/captcha';

const SliderModel = {
  namespace: 'slider',
  state: {
    // 是否显示验证框
    isShow: false,
    captchaVerification: '',
    checkSuccess: 'init',
    backToken: '', //后端返回的唯一token值
    secretKey: '', //后端返回的加密秘钥 字段
    blockBackImgBase: '', //验证滑块的背景图片
    backImgBase: '', //验证码背景图片
    // secretKey,
    // dispatch,
    // blockBackImgBase,
    //iconColor,
    //iconClass,
    //tipWords,
    //passFlag,
    //backImgBase,
    setSize: {
      imgHeight: 155,
      imgWidth: 330,
      barHeight: 40,
      barWidth: 310,
    },
    vSpace: 5,
    barSize: {
      width: '310px',
      height: '40px',
    },

    //passFlag: false, //是否通过的标识

    // startMoveTime: '', //移动开始的时间
    // endMovetime: '', //移动结束的时间
    // tipsBackColor: '', //提示词的背景颜色
    // tipWords: '提示词的背景颜色',
    // text: '',
    // finishText: '',

    // top: 0,
    // left: 0,
    // moveBlockLeft: undefined,
    // leftBarWidth: undefined,
    // // 移动中样式
    // moveBlockBackgroundColor: undefined,
    // leftBarBorderColor: '#ddd',
    // // iconColor: undefined,
    // iconColor: '#000',
    // iconClass: 'icon-right',
    // status: false, //鼠标状态
    // isEnd: false, //是够验证完成
    // showRefresh: true,
    // transitionLeft: '',
    // transitionWidth: '',
    // //其他属性
    // captchaType: '',
    // type: '1',
    // //弹出式pop，固定fixed
    // mode: 'fixed',

    // explain: '向右滑动完成验证',
    imgSize: {
      width: '330px',
      height: '155px',
    },
  },
  effects: {
    *change({ payload }, { call, put }) {
      yield put({
        type: 'changeShowStatus',
      });
    },

    *fetch({ payload }, { call, put }) {
      const response = yield call(getPicture, payload);
      yield put({
        type: 'getPicture',
        payload: response,
      });
    },

    *check({ payload }, { call, put }) {
      const response = yield call(reqCheck, payload);
      const captchaVerification = payload.captchaVerification;
      yield put({
        type: 'checkPicture',
        payload: { ...response, captchaVerification },
      });
    },
  },
  reducers: {
    changeShowStatus(state, action) {
      return { ...state, isShow: !state.isShow,checkSuccess: 'init' };
    },

    getPicture(state, action) {
      const { payload } = action;
      const { repData } = payload;
      if (payload.repCode == '0000') {
        return {
          ...state,
          backImgBase: repData.originalImageBase64,
          blockBackImgBase: repData.jigsawImageBase64,
          backToken: repData.token,
          secretKey: repData.secretKey,
          checkSuccess: 'init',
        };
      } else {
        return { ...state, text: payload.repMsg };
      }
    },

    checkPicture(state, action) {
      const { payload } = action;
      const successInfo = {
        checkSuccess: 'success',
        captchaVerification: payload.captchaVerification,
      };
      const failInfo = {
        checkSuccess: 'failure',
      };
      if (payload.repCode === '0000') {
        return { ...state, ...successInfo };
      } else {
        return { ...state, ...failInfo };
      }
    },
  },
};

export default SliderModel;
